'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Button, Card, Typography, Space, Spin } from 'antd'
import {
    MedicineBoxOutlined,
    LoginOutlined,
    UserAddOutlined,
    EyeOutlined,
    SafetyOutlined,
    CloudOutlined,
    ExperimentOutlined,
    BarChartOutlined
} from '@ant-design/icons'

const { Title, Paragraph } = Typography

export default function LoadingPage() {
    const [loading, setLoading] = useState(true)
    const [systemReady, setSystemReady] = useState(false)
    const router = useRouter()

    useEffect(() => {
        // 检查系统状态
        const checkSystemHealth = async () => {
            try {
                const response = await fetch('/api/health')
                const data = await response.json()

                if (data.success) {
                    setSystemReady(true)
                }
            } catch (error) {
                console.error('系统健康检查失败:', error)
            } finally {
                // 模拟加载时间
                setTimeout(() => {
                    setLoading(false)
                }, 2000)
            }
        }

        checkSystemHealth()
    }, [])

    const handleLogin = () => {
        router.push('/login')
    }

    const handleRegister = () => {
        router.push('/register')
    }

    const handleDashboard = () => {
        router.push('/products')
    }

    if (loading) {
        return (
            <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#F8FBFD' }}>
                <div className="text-center">
                    <div className="mb-8">
                        <MedicineBoxOutlined
                            className="text-8xl mb-4 animate-pulse"
                            style={{ color: '#00A9A4' }}
                        />
                    </div>
                    <Title
                        level={2}
                        className="mb-4"
                        style={{
                            color: '#0A1C3E',
                            fontSize: '32px',
                            fontWeight: 600,
                            lineHeight: 1.2
                        }}
                    >
                        医学影像处理工具集成展示平台
                    </Title>
                    <div className="flex items-center justify-center space-x-2">
                        <Spin size="large" />
                        <span
                            className="text-lg"
                            style={{ color: '#4F6479' }}
                        >
                            系统初始化中...
                        </span>
                    </div>
                </div>
            </div>
        )
    }

    return (
        <div className="min-h-screen relative" style={{ backgroundColor: '#F8FBFD' }}>
            {/* 系统状态条 - 右上角 */}
            {systemReady && (
                <div
                    className="fixed top-4 right-4 px-4 py-2 rounded-lg flex items-center"
                    style={{ backgroundColor: '#E6F7F6' }}
                >
                    <div className="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
                    <span
                        style={{
                            fontSize: '14px',
                            fontWeight: 500,
                            color: '#0A1C3E'
                        }}
                    >
                        系统运行正常
                    </span>
                </div>
            )}

            <div className="container mx-auto px-4 py-16">
                {/* 头部标题 */}
                <div className="text-center mb-16">
                    <MedicineBoxOutlined
                        className="mb-8 animate-pulse"
                        style={{
                            fontSize: '80px',
                            color: '#00A9A4'
                        }}
                    />
                    <Title
                        level={1}
                        className="mb-6"
                        style={{
                            fontSize: '48px',
                            fontWeight: 600,
                            color: '#0A1C3E',
                            lineHeight: 1.2,
                            margin: 0
                        }}
                    >
                        医学影像处理工具集成展示平台
                    </Title>
                    <Paragraph
                        className="mx-auto"
                        style={{
                            fontSize: '18px',
                            color: '#4F6479',
                            lineHeight: 1.6,
                            maxWidth: '640px',
                            margin: '0 auto'
                        }}
                    >
                        专业的医学影像处理工具集成平台，提供CT、MRI、X光、超声等
                        <br />
                        多种医学影像的处理、分析、诊断辅助工具，助力医疗诊断与科研
                    </Paragraph>
                </div>

                {/* 主要功能卡片 - 单卡片居中布局 */}
                <div className="flex justify-center mb-16">
                    <Card
                        className="text-center hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 max-w-md w-full"
                        style={{
                            backgroundColor: '#FFFFFF',
                            border: '1px solid #E5EDF5',
                            borderRadius: '12px',
                            boxShadow: '0 2px 4px rgba(0,0,0,0.04)'
                        }}
                        styles={{ body: { padding: '3rem 2rem' } }}
                    >
                        <LoginOutlined
                            className="mb-6"
                            style={{
                                fontSize: '60px',
                                color: '#00A9A4'
                            }}
                        />
                        <Title
                            level={2}
                            className="mb-4"
                            style={{
                                fontSize: '24px',
                                fontWeight: 600,
                                color: '#0A1C3E',
                                margin: '0 0 16px 0'
                            }}
                        >
                            登录 / 注册
                        </Title>
                        <Paragraph
                            className="mb-8"
                            style={{
                                fontSize: '16px',
                                color: '#4F6479',
                                lineHeight: 1.6,
                                marginBottom: '32px'
                            }}
                        >
                            已有账号可直接登录使用平台的各种医学影像处理工具
                            <br />
                            新用户请先注册账号以获得完整的功能访问权限
                        </Paragraph>
                        <Space direction="vertical" size="large" className="w-full">
                            <Button
                                type="primary"
                                size="large"
                                icon={<LoginOutlined />}
                                onClick={handleLogin}
                                className="w-full"
                                style={{
                                    backgroundColor: '#00A9A4',
                                    borderColor: '#00A9A4',
                                    borderRadius: '8px',
                                    padding: '12px 24px',
                                    height: 'auto',
                                    fontSize: '16px',
                                    fontWeight: 500
                                }}
                            >
                                立即登录
                            </Button>
                            <Button
                                size="large"
                                icon={<UserAddOutlined />}
                                onClick={handleRegister}
                                className="w-full"
                                style={{
                                    borderColor: '#E5EDF5',
                                    color: '#0A1C3E',
                                    borderRadius: '8px',
                                    padding: '12px 24px',
                                    height: 'auto',
                                    fontSize: '16px',
                                    fontWeight: 500
                                }}
                            >
                                注册账号
                            </Button>
                        </Space>

                        <div className="mt-6 pt-4" style={{ borderTop: '1px solid #E5EDF5' }}>
                            <Button
                                size="middle"
                                onClick={handleDashboard}
                                style={{
                                    backgroundColor: 'transparent',
                                    borderColor: '#E5EDF5',
                                    color: '#4F6479',
                                    borderRadius: '6px'
                                }}
                            >
                                浏览产品
                            </Button>
                        </div>
                    </Card>
                </div>

                {/* 平台特性 */}
                <div className="max-w-5xl mx-auto">
                    <Title
                        level={3}
                        className="text-center mb-12"
                        style={{
                            fontSize: '28px',
                            fontWeight: 600,
                            color: '#0A1C3E',
                            marginBottom: '48px'
                        }}
                    >
                        平台特性
                    </Title>
                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {[
                            { icon: <EyeOutlined />, title: '多模态影像支持', desc: 'CT、MRI、X光、超声' },
                            { icon: <ExperimentOutlined />, title: '智能分析算法', desc: '深度学习辅助诊断' },
                            { icon: <BarChartOutlined />, title: '数据可视化', desc: '3D重建与测量工具' },
                            { icon: <SafetyOutlined />, title: '数据安全保护', desc: '符合医疗数据标准' },
                            { icon: <CloudOutlined />, title: '云端协作', desc: '多科室协同诊断' },
                            { icon: <MedicineBoxOutlined />, title: '临床集成', desc: '无缝对接HIS系统' },
                            { icon: <ExperimentOutlined />, title: '科研支持', desc: '数据导出与统计' },
                            { icon: <EyeOutlined />, title: '实时处理', desc: '快速影像处理响应' }
                        ].map((feature, index) => (
                            <Card
                                key={index}
                                className="text-center hover:shadow-md transition-all duration-300"
                                style={{
                                    backgroundColor: '#FFFFFF',
                                    border: '1px solid #E5EDF5',
                                    borderRadius: '8px',
                                    boxShadow: '0 2px 4px rgba(0,0,0,0.04)'
                                }}
                                styles={{ body: { padding: '24px 16px' } }}
                            >
                                <div
                                    className="mb-4"
                                    style={{
                                        fontSize: '40px',
                                        color: '#00A9A4'
                                    }}
                                >
                                    {feature.icon}
                                </div>
                                <div
                                    className="mb-2"
                                    style={{
                                        fontSize: '16px',
                                        fontWeight: 500,
                                        color: '#0A1C3E'
                                    }}
                                >
                                    {feature.title}
                                </div>
                                <div
                                    style={{
                                        fontSize: '14px',
                                        color: '#6C7A89',
                                        lineHeight: 1.5
                                    }}
                                >
                                    {feature.desc}
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>

                {/* 底部信息 */}
                <div
                    className="text-center mt-16 pt-8"
                    style={{ borderTop: '1px solid #E5EDF5' }}
                >
                    <Paragraph
                        style={{
                            fontSize: '14px',
                            color: '#6C7A89',
                            margin: 0
                        }}
                    >
                        © 2025 医学影像处理工具集成展示平台 - All rights reserved |
                        <span className="mx-2">技术支持</span> |
                        <span className="mx-2">联系我们</span> |
                        <span className="mx-2">使用条款</span> |
                        <span className="mx-2">隐私政策</span>
                    </Paragraph>
                </div>
            </div>
        </div>
    )
}